<template>
  <el-table :data="bookList"
            border
            style="width: 100%">
    <el-table-column prop="id"
                     label="序号"
                     width="50">
    </el-table-column>
    <el-table-column prop="name"
                     label="名称"
                     width="120">
    </el-table-column>
    <el-table-column prop="author"
                     label="作者"
                     width="120">
    </el-table-column>
    <el-table-column prop="price"
                     label="价格"
                     width="80">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scoped">
        <el-button type="primary"
                   size="mini"
                   @click="openUpdate(scoped.row.id)">编辑</el-button>
        <el-button type="danger"
                   size="mini"
                   @click="del(scoped.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  props: ['bookList'],
  data () {
    return {

    }
  },
  methods: {
    openUpdate (id) {
      //1.bus 组件与组件之间的调用
      //2.list调用index一个函数，再通过index里面的函数使用ref调用创建或修改窗口open函数
      // this.$emit('updateOpen', 'update');
      //3.通过的父组件再通过ref调用创建或修改窗口open函数
      this.$parent.$refs.dialogForm.open('update', id);
    },
    del (id) {
      this.axios.get('/book/del?id=' + id).then(res => {
        if (res.data.code == '2000') {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.$emit('refresh');
        } else {
          this.$message({
            message: '删除失败',
            type: 'error'
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>